<div
  class="accessory-box"
  [ngClass]="{
    'accessory-on': service.values.SecuritySystemCurrentState !== 3,
    'home': service.values.SecuritySystemCurrentState === 0,
    'away': service.values.SecuritySystemCurrentState === 1,
    'night': service.values.SecuritySystemCurrentState === 2,
    'triggered': service.values.SecuritySystemCurrentState === 4,
  }"
  (longClick)="onClick()"
  (shortClick)="onClick()"
  tabindex="0"
>
  <div class="d-flex flex-column h-100">
    <div [attr.aria-label]="'accessories.core.security_system' | translate" class="accessory-svg">
      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- siren dome -->
        <path
          class="dome"
          d="M7 18 C7 5, 25 5, 25 18 V26 H7 V18 Z"
          fill="none"
          stroke="#7f7f7f"
          stroke-width="1.5"
          fill-opacity="0.5"
        />
        <!-- base -->
        <rect x="2" y="26" width="28" height="4" fill="none" stroke="#7f7f7f" stroke-width="1.5" rx="1" />
        <!-- light waves left to right -->
        <line class="ray" x1="6" y1="3" x2="10" y2="7" stroke-width="3" />
        <line class="ray" x1="16" y1="0" x2="16" y2="5" stroke-width="3" />
        <line class="ray" x1="26" y1="3" x2="22" y2="7" stroke-width="3" />
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    @switch (service.values.SecuritySystemCurrentState) { @case (0) {
    <div class="accessory-label grey-text">{{ 'accessories.control.home' | translate }}</div>
    } @case (1) {
    <div class="accessory-label grey-text">{{ 'accessories.control.away' | translate }}</div>
    } @case (2) {
    <div class="accessory-label grey-text">{{ 'accessories.control.night' | translate }}</div>
    } @case (3) {
    <div class="accessory-label red-text">{{ 'accessories.control.off' | translate }}</div>
    } @case (4) {
    <div class="accessory-label red-text">{{ 'accessories.control.triggered' | translate }}</div>
    } }
  </div>
</div>
